<html>
<head>
    <meta charset="UTF-8">
    <title>图书管理</title>
</head>
<body id="app">
<form>
    <input type="text" v-model="book.name" placeholder="请输入书名">
    <input type="text" v-model="book.author" placeholder="请输入作者">
    <input type="text" v-model="book.press" placeholder="请输入出版社">
    <select v-model="book.state">
        <option value="">全部</option>
        <option value="1">在馆</option>
        <option value="0">已借出</option>
    </select>
    <input type="button" id="searchBtn" value="查询" @click="doList()">
    <input type="reset" value="重置" />
</form>
<table width="100%">
    <tr>
        <th>序号</th>
        <th>ID</th>
        <th>书名</th>
        <th>作者</th>
        <th>出版日期</th>
        <th>出版社</th>
        <th>价格</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
    <tr v-for="(book, index) in books" :key="index">
        <td>{{ index + 1 }}</td>
        <td>{{ book.id }}</td>
        <td>{{ book.name }}</td>
        <td>{{ book.author }}</td>
        <td>{{ book.date }}</td>
        <td>{{ book.press }}</td>
        <td>{{ book.price }}</td>
        <td>{{ book.state == 1 ? "在馆" : "已借出" }}</td>
        <td>
            <a :href="'/bms/page_book/updateBook.html?'+book.id">修改</a>
            <a href="javascript:void(0)" @click="doDelete(book.id)">删除</a>
        </td>
    </tr >
</table>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    Vue.createApp({
        data(){
            return{
                book:{
                    name:"",
                    author:"",
                    date:"",
                    press:"",
                },
                books:[]
            }
        },
        methods:{
            async doList(){
                const {data} = await axios.get('/bms/book',{params:this.book});
                this.books = data;
            },
            async doDelete(id){
                const {data} = await axios.delete('/bms/book/'+id);
                if(data > 0){
                    await this.doList();
                }else{
                    alert("删除失败");
                }
            }
        },
        mounted() {
            this.doList();
        },
    }).mount('#app');
</script>
</html>
